<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--<%@taglib prefix="wetechfn" uri="/WEB-INF/tlds/wetech-functions.tld" %>--%>
<%@taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %>
<%@ taglib prefix="shiro" uri="/WEB-INF/tlds/shiros.tld" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        用户管理
        <small>系统用户管理页面</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">用户管理</a></li>
        <li class="active">系统用户管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="btn-group btn-group-sm" id="toolbara">
                    <div class="col-md-2 pull-right">
                        <button type="button" id="addBtn" class="btn btn-default" data-toggle="modal"
                                data-target="#addModal"><i class="glyphicon glyphicon-plus"></i> 新增
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <%--<p id="toolbar">
                    <form class="form-inline">
                        <div class="form-group">
                            <label class="sr-only" >组长/组员</label>
                            <div class="input-group">
                                <div class="input-group-addon">组长/组员</div>
                                <select class="form-control" name="locked" id="locked">
                                    <option value="">请选择...</option>
                                    <option value="0">组员</option>
                                    <option value="1">组长</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only">真实姓名</label>
                            <div class="input-group">
                                <div class="input-group-addon">真实姓名</div>
                                <input type="text" class="form-control" name="reallyName" id="really_name"
                                       placeholder="关键字...">
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary queryButton">查询</button>
                    </form>--%>
                </div>
                <table id="table"></table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

    </div>
    <%-- <div class="panel panel-default">
         <div class="panel-body">
             <form role="form" id="searchForm" class="form-inline">
                 <div class="form-group">
                     <label for="sname1">用户名</label> <input type="text"
                                                            class="form-control" id="sname1" name="sname1" placeholder="请输入名称">
                 </div>
                 <div class="form-group">
                     <button type="button" id="searchBtn" class="btn btn-default">开始搜索</button>
                 </div>
             </form>
         </div>
     </div>
     <!--列表展示-->
     <div class="table-responsive" id="listDiv">
         <table class="table table-striped table-hover" id="table">
         </table>
     </div>--%>
    <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

<!-- add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <form id="addForm">
                    <div class="form-group">
                        <label class="control-label" for="username"><span class="asterisk">*</span>登录名:</label>
                        <input id="username" type="text" class="form-control" name="username" placeholder="输入登录名"
                               minlength="3" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="reallyName"><span class="asterisk">*</span>真实姓名:</label>
                        <input id="reallyName" type="text" class="form-control" name="reallyName" placeholder="输入真实姓名"
                               minlength="1" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="phone">人员电话:</label>
                        <input id="phone" type="number" class="form-control" name="phone" placeholder="输入手机号"
                               required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="organizationName"><span class="asterisk">*</span>所属组织:</label>
                        <input type="text" class="form-control" id="organizationName" name="organizationName" readonly
                               required>
                        <input type="hidden" id="organizationId" name="organizationId" readonly required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="roleIds"><span class="asterisk">*</span>角色列表:</label>
                        <select name="roleIds" id="roleIds" class="form-control chosen-select"
                                data-placeholder="请从列表选择一项" onchange="onRoleChange()" required>
                            <c:forEach items="${roleList}" var="role">
                                <option value="${role.id}">${role.description}</option>
                            </c:forEach>
                        </select>
                        <div class="help-block with-errors"></div>
                    </div>
                   <div class="form-group" hidden>
                       <label class="radio-inline">
                           <input type="text" name="userType" id="fileRadio" > 档案组长
                       </label>
                       <%-- <label class="radio-inline">
                            <input type="radio" name="userType" id="fileMember" > 档案组员
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="userType" id="fileLeader" > 档案组长
                        </label>
                       <label class="radio-inline">
                           <input type="radio" name="userType" id="riskMember"> 风控人员
                       </label>--%>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="remarks">备注:</label>
                        <textarea autofocus id="remarks" class="form-control" name="remarks"
                                  maxlength="300" placeholder="备注">
                        </textarea>
                        <div class="help-block with-errors"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="addForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#addForm',url:'<%=request.getContextPath()%>/user/create',after:'$.myAction.refreshContent'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">修改用户信息</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" name="id"/>
                    <div class="form-group">
                        <label class="control-label" for="reallyName"><span class="asterisk">*</span>真实姓名:</label>
                        <input id="editUsername" type="text" class="form-control" name="reallyName" placeholder="真实姓名"
                               minlength="1" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="phone">人员电话:</label>
                        <input id="edit_phone" type="number" class="form-control" name="phone" placeholder="输入手机号"
                               required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="organizationName"><span class="asterisk">*</span>所属组织:</label>
                        <input type="text" class="form-control" id="editOrganizationName" name="organizationName"
                               readonly required>
                        <input type="hidden" id="editOrganizationId" name="organizationId" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="editRoleIds"><span class="asterisk">*</span>角色列表:</label>
                        <select name="roleIds" id="editRoleIds" class="form-control chosen-select"
                                data-placeholder="请从列表选择一项" onchange="onRoleChangeEdit()" required>
                            <c:forEach items="${roleList}" var="role">
                                <option value="${role.id}">${role.description}</option>
                            </c:forEach>
                        </select>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group" hidden>
                       <%-- <label class="radio-inline">
                            <input type="radio" name="userType" id="optionsRadios5" value="0"> 组员
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="userType" id="optionsRadios6" value="1"> 组长
                        </label>--%>
                           <label class="radio-inline">
                               <input type="text" name="userType" id="editFileRadio" > 档案组长
                           </label>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="remarks">备注:</label>
                        <textarea id="edit_remarks" class="form-control" name="remarks"
                                  maxlength="300">
                        </textarea>
                        <div class="help-block with-errors"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="editForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#editForm',url:'<%=request.getContextPath()%>/user/update',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- delete modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteSmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteSmallModalLabel">删除用户</h4>
            </div>
            <div class="modal-body">
                <form id="deleteForm"></form>
                确定要删除名字为<span class="records"></span> 的用户信息?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" form="deleteForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#deleteForm',url:'<%=request.getContextPath()%>/user/delete',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- reset modal -->
<div class="modal fade" id="resetModal" tabindex="-1" role="dialog" aria-labelledby="resetSmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="resetSmallModalLabel">重置用户密码</h4>
            </div>
            <div class="modal-body">
                <form id="resetForm"></form>
                确定要重置名字为 <span class="records"></span> 用户的密码?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" form="resetForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#resetForm',url:'<%=request.getContextPath()%>/user/changePass',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- allot modal -->
<div class="modal fade" id="allotModal" tabindex="-1" role="dialog" aria-labelledby="allotModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="allotModalLabel">指定审核人</h4>
            </div>
            <div class="modal-body">
                <form id="allotForm">
                    <input type="hidden" name="id"/>
                    <div class="form-group">
                        <label class="control-label" for="organizationName">所属组织:</label>
                        <input type="text" class="form-control" id="" name="organizationName"
                               readonly>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="reallyName">为真实姓名:</label>

                        <input id="allot_Username" type="text" class="form-control" name="reallyName" readonly>
                        <div class="help-block with-errors"></div>
                    </div>

                    <div class="form-group">
                        <label class="control-label"><span class="asterisk">*</span>指定审核人:</label>
                        <%--<input id="allot_Username" type="text" class="form-control" name="reallyName" placeholder="真实姓名"
                               minlength="1" required>--%>
                        <select class="form-control" id="comType" name="pId">
                            <c:forEach items="${fns:getLeaderOptions()}" var="leaderList">
                                <option value="${leaderList.id}">${leaderList.organizationName}<${leaderList.reallyName}></option>
                            </c:forEach>
                        </select>
                        <div class="help-block with-errors"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="allotForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#allotForm',url:'<%=request.getContextPath()%>/user/allot',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- zTree -->
<div id="menuContent" class="menuContent"
     style="display:none;z-index:1989101600;position: absolute;border: 1px solid #ccc; background-color: #fff;">
    <ul id="tree" class="ztree"></ul>
</div>
<script>
    var $table = $('#table');

    $(function () {
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: path + '/user/list',
            idField: 'id',
            searchOnEnterKey: true,
            showColumns: false,
            detailView: false,
            search: false,
            /*queryParams: Search,*/
            striped: true,
            columns: [
                /*{field: 'state', checkbox: true},*/
                {field: 'id', title: '编号'},
                {field: 'username', title: '登录名'},
                {field: 'reallyName', title: '真实姓名'},
                {field: 'phone', title: '联系电话'},
                {field: 'organizationName', title: '所属组织'},
                /*{field: 'roleNames', title: '角色列表'},*/
//                {field: 'locked', title: '状态',
//                    formatter: function (value, row, index) {
//                        if (value == '0') {
//                            return "正常";
//                        } else {
//                            return "不正常";
//                        }
//                    },
//                },
                {field: 'userType', title: '组长/组员',
                    formatter: function (value, row, index) {
                        if (value == '0') {
                            return "组员";
                        } else if (value == '1') {
                            return "组长";
                        } else if(value == '2'){
                            return "风控人员";
                        }else{
                            return "管理员"
                        }
                    },
                },
                {field: 'pName', title: '审核人'},
                {field: 'createDate', title: '创建时间'},
                {field: 'remarks', title: '备注'},
                {
                    field: 'action',
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
    });
    //参数传递
    function Search() {
        var temp = {
            locked: $("#locked").val(),
            reallyName: $("#reallyName").val(),
        };
        return temp;
    }
    //查询
    $(document).on('click', ".queryButton",function(){
        $('#table').bootstrapTable('refresh');
    });

    // 数据表格展开内容
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

    function editAfter(obj, row) {
        var roleIdList = row.roleIdList;
        for (i in roleIdList) {
            var roleId = roleIdList[i];
            $('#editForm').find('[name=roleIds]').find('option[value=' + roleId + ']').prop('selected', true);
        }
        /*if (row.userType == '1') {
            $('#optionsRadios6').attrs("checked", true)
        } else if (row.userType == '0') {
            $('#optionsRadios7').attrs("checked", true)
        }*/
        $(".chosen-select").trigger("chosen:updated");
    }

    function actionFormatter(value, row, index) {
        return '\
         <a class="allot ml10" href="javascript:void(0)" data-toggle="tooltip" title="指定审核人"><i class="glyphicon glyphicon-user"></i></a>　\
        <shiro:hasPermission name="user:update">\
        <a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　\
        </shiro:hasPermission>\
        <shiro:hasPermission name="user:delete">\
        <a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip"  title="删除"><i class="glyphicon glyphicon-remove"></i></a>　\
        </shiro:hasPermission>\
        ';
    }

    window.actionEvents = {
        'click .edit': function (e, value, row, index) {
            $('#editModal').modal('show')
            $('#editForm').fillForm(row);

            editAfter('', row);
        },
        'click .remove': function (e, value, row, index) {
            $('#deleteModal').modal('show');
            $('.records').html(row.reallyName);
            var html = '';
            html += '<input type="hidden" name="id" value="' + row.id + '">';
            $('#deleteForm').html(html);
        },
        'click .allot': function (e, value, row, index) {
            $('#allotModal').modal('show');
            $('#allotForm').fillForm(row);
            /* $('.records').html(row.reallyName);
             var html = '';
             html += '<input type="hidden" name="id" value="' + row.id+ '">';
             $('#deleteForm').html(html);*/
        }
    };

    var setting = {
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };

    var zNodes = [
        <c:forEach items="${organizationList}" var="o">
        <c:if test="${not o.rootNode}">
        {id:${o.id}, pId:${o.parentId}, name: "${o.name}"},
        </c:if>
        </c:forEach>
    ];

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree"),
                nodes = zTree.getSelectedNodes(),
                id = "",
                name = "";
        nodes.sort(function compare(a, b) {
            return a.id - b.id;
        });
        for (var i = 0, l = nodes.length; i < l; i++) {
            id += nodes[i].id + ",";
            name += nodes[i].name + ",";
        }
        if (id.length > 0) id = id.substring(0, id.length - 1);
        if (name.length > 0) name = name.substring(0, name.length - 1);
        $("#organizationId").val(id);
        $("#organizationName").val(name);
        $("#editOrganizationId").val(id);
        $("#editOrganizationName").val(name);
        hideMenu();
    }

    function showMenu() {
        var cityObj = $("#organizationName");
        var cityOffset = $("#organizationName").offset();
        $("#menuContent").css({
            left: cityOffset.left + "px",
            top: cityOffset.top + cityObj.outerHeight()
        }).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }

    function showMenuOfEdit() {
        var cityObj = $("#editOrganizationName");
        var cityOffset = $("#editOrganizationName").offset();
        $("#menuContent").css({
            left: cityOffset.left + "px",
            top: cityOffset.top + cityObj.outerHeight()
        }).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    function onBodyDown(event) {
        if (!(event.target.id == "organizationName" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }
    
    function onRoleChange() {
        var roleID = $("#roleIds").val();
        if(roleID==6){
            $("#fileRadio").val(0);
            $("#editFileRadio").val(0);
        }else if (roleID==7){
            $("#fileRadio").val(1);
            $("#editFileRadio").val(1);
        }else if (roleID==9){
            $("#fileRadio").val(2);
            $("#editFileRadio").val(2);
        }else {
            $("#roleIds").val("")
        }
    }

    function onRoleChangeEdit() {
        var roleID = $("#editRoleIds").val();
        if(roleID==6){
            $("#editFileRadio").val(0);
        }else if (roleID==7){
            $("#editFileRadio").val(1);
        }else if (roleID==9){
            $("#editFileRadio").val(2);
        }else {
            $("#roleIds").val("")
        }
    }

    $.fn.zTree.init($("#tree"), setting, zNodes);
    $("#organizationName").click(showMenu);
    $("#editOrganizationName").click(showMenuOfEdit);
</script>